<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../img/acc.ico">
    <title>个人博客</title>
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
    <style>
        
        body {
            background-color: #242930;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            color: white;
            flex-direction: column;
        }
        .container {
            display: flex;
            width: 80%;
            max-width: 1200px;
            gap: 20px;
            justify-content: center;
            /* align-items: center; */
        }
        .container-left {
            width: 250px;
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            
        }
       
        .acc img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 10px auto;
            display: block;
            transition: box-shadow 0.3s;
        }
        .acc img:hover {
            box-shadow: 0 0 15px rgba(150, 150, 243, 0.8);
        }
        .nav-links a {
            display: block;
            padding: 10px;
            color: #fff;
            text-decoration: none;
            transition: background 0.3s;
            border-radius: 15px;
        }
        .nav-links a:hover {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 15px;
        }
        .container-right {
            flex: 1;
            max-width: 50%;
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
        }
        .post-list {
            list-style: none;
            padding: 0;
        }
        .post-list li {
            padding: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            cursor: pointer;
        }
        .post-list li:hover {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 15px;
        }
        .markdown-content {
            margin-top: 20px;
            background: rgba(0, 0, 0, 0.3);
            padding: 15px;
            border-radius: 10px;
        }
        .read-more {
            display: block;
            margin-top: 10px;
            padding: 5px 10px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            text-decoration: none;
            border-radius: 5px;
            text-align: center;
            width: 100px;
        }
        .read-more:hover {
            background: rgba(255, 255, 255, 0.4);
        }

       
    body {
        background: linear-gradient(-45deg, #1e3c72, #2a5298, #242930, #0f2027);
        background-size: 400% 400%;
        animation: gradientAnimation 10s ease infinite;
    }
    /* 让背景颜色动态变换 */
    @keyframes gradientAnimation {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

        
    </style>
    
</head>
<body>
    
<div class="container">
    <div class="container-left">
        <a class="acc" href="#">
            <img src="../img/acc.jpg" alt="头像" onclick="onclick()">
        </a>
        <lable>ime</lable>
        <p>欢迎来到我的博客</p>
        <div class="nav-links">
            <a href="#">主页</a>
            <a href="#"onclick="checked()"">关于</a>
        </div>
    </div>
    <div class="container-right">
        <h2>博客文章</h2>
        <ul class="post-list" id="post-list">
            <li onclick="loadPost(1)">文章 1: Hyprland 配置</li>
        </ul>
        
        <div class="markdown-content" id="markdown-content"></div>
    </div>
</div>

<script>
    function loadPost(id) {
        let contentDiv = document.getElementById("markdown-content");
        let markdownText = "";
        let fullArticleLink = "";
        if(contentDiv.innerHTML!="") {
            contentDiv.innerHTML="";
            return;
        }
        switch(id) {
            case 1:
                markdownText = `# Hyprland 安装与配置\n\nHyprland 是一个动态窗口管理器，支持 Wayland。`;
                fullArticleLink = "hyprland.html";
                break;
            case 2:
                
            case 3:
                
            case 4:
                
        }
        
        contentDiv.innerHTML = marked.parse(markdownText) + `<a class='read-more' href='${fullArticleLink}'>阅读全文</a>`;
    }
   
    checked =()=> {
        let contentDiv = document.getElementById("markdown-content");
        // contentDiv.innerHTML = marked.parse("こんにちは");

    }

</script>
</body>
</html>
